<template>
<Dropdown size="small" placement="right-start" trigger="hover">
    <DropdownItem :selected="value==values[depth-1]">
        {{label}}
        <Icon type="ios-arrow-forward"></Icon>
    </DropdownItem>
    <DropdownMenu slot="list">
        <template v-for="(item, index) in options">
            <DropdownItem v-if="!item.children" :key="index" :name="item._index" :selected="item.value==values[depth]">{{item.label}}</DropdownItem>
            <nest-select-sub-item v-else-if="item.children" 
            :value="item.value"
            :values="values"
            :_index="item._index" 
            :key="index" 
            :options="item.children" 
            :label="item.label" 
            :depth="depth + 1"></nest-select-sub-item>
        </template>
    </DropdownMenu>
</Dropdown>
</template>

<script>
import NestSelectSubItem from './NestSelectSubItem.vue';

export default {
    name: "nest-select-sub-item",
    props: {
        values: {
            type: Array
        },
        value: {
            type: String,
        },
        _index: {
            type: String
        },
        options: {
            type: Array,
            default: () => []
        },
        label: {
            type: String,
            default: ""
        },
        depth: {
            type: Number,
            default: 0
        }
    },
    components: {
        NestSelectSubItem
    },
    data() {
        return {
        }
    },
    computed: {
    },
    methods: {
        handleClick(index) {
        },
    }
}
</script>
